<script setup>
defineOptions({
    name: 'HomeCategory'
})
// 引入状态
import { useCategoryStore } from '@/stores/category';

// 左侧菜单栏数据
const categoryStore=useCategoryStore()

</script>
<template>
    <div class="home-category">
      <ul class="menu">
        <li v-for="item in categoryStore.categoryList" :key="item.id">
          <RouterLink to="/">{{item.name}}</RouterLink>
          <RouterLink v-for="i in item.children.slice(0,2)" :key="i.id" to="/">{{i.name}}</RouterLink>
          <!-- 弹层layer位置 -->
          <div class="layer">
            <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
            <ul>
              <li v-for="j in item.goods" :key="j.id">
                <RouterLink to="/">
                  <img alt="图片未找到" :src="j.picture" />
                  <div class="info">
                    <p class="name ellipsis-2">
                      {{j.name}}
                    </p>
                    <p class="desc ellipsis">{{ j.desc }}</p>
                    <p class="price"><i>¥</i>{{ j.price }}</p>
                  </div>
                </RouterLink>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </template>
  
  
  <style scoped lang='scss'>
  .home-category {
    width: 250px;
    height: 500px;
    background: rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 99;
  
    .menu {
      li {
        padding-left: 40px;
        height: 55px;
        line-height: 55px;
  
        &:hover {
          background: $xtxColor;
        }
  
        a {
          margin-right: 4px;
          color: #fff;
  
          &:first-child {
            font-size: 16px;
          }
        }
  
        .layer {
          width: 990px;
          height: 500px;
          background: rgba(255, 255, 255, 0.8);
          position: absolute;
          left: 250px;
          top: 0;
          display: none;
          padding: 0 15px;
  
          h4 {
            font-size: 20px;
            font-weight: normal;
            line-height: 80px;
  
            small {
              font-size: 16px;
              color: #666;
            }
          }
  
          ul {
            display: flex;
            flex-wrap: wrap;
  
            li {
              width: 310px;
              height: 120px;
              margin-right: 15px;
              margin-bottom: 15px;
              border: 1px solid #eee;
              border-radius: 4px;
              background: #fff;
  
              &:nth-child(3n) {
                margin-right: 0;
              }
  
              a {
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                padding: 10px;
  
                &:hover {
                  background: #e3f9f4;
                }
  
                img {
                  width: 95px;
                  height: 95px;
                }
  
                .info {
                  padding-left: 10px;
                  line-height: 24px;
                  overflow: hidden;
  
                  .name {
                    font-size: 16px;
                    color: #666;
                  }
  
                  .desc {
                    color: #999;
                  }
  
                  .price {
                    font-size: 22px;
                    color: $priceColor;
  
                    i {
                      font-size: 16px;
                    }
                  }
                }
              }
            }
          }
        }
  
        // 关键样式  hover状态下的layer盒子变成block
        &:hover {
          .layer {
            display: block;
          }
        }
      }
    }
  }
  </style>